﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Below three meta labels *MUST* be on the top -->
    <title>Vacation System</title>

    {% load staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static 'online/css/bootstrap.min.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'online/css/bootstrap-table.min.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'online/css/common-style.css' %}" />
    
    <script src="{% static 'online/js/jquery-1.10.2.min.js' %}"></script>
    <script src="{% static 'online/laydate/laydate.js' %}"></script>
    

    <style>
        .input-group {
            width:100%;
        }
        .input-group-addon {
            width:120px;
        }
        .selectpicker {
            width:100%;
            height:34px;
        }
    </style>
</head>
<body>

    <div class="panel-body">
        <!-- Table -->
        <table id="table"></table>
    </div>




    <!-- ????Modal? -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Add vacation records</h4>
                </div>
                <div class="modal-body">
                    <div id="myAlert" class="alert alert-success hidden" style="">
                        <!--<a href="#" class="close" data-dismiss="alert">&times;</a>-->
                        <strong>successfully submitted！</strong>
                    </div>

                    <div id="myAlerterror" class="alert alert-warning hidden" style="">
                        <!--<a href="#" class="close" data-dismiss="alert">&times;</a>-->
                        <strong>Submission failure！</strong>
                    </div>

                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-6 margin-top-8">
                                <div class="input-group">
                                    <span class="input-group-addon" id="">person</span>
                                    <select class="selectpicker" name="vac_person" id="vac_person" data-style="btn-info">
                                        <option value="Mime Li">Mime Li</option>
                                        <option value="David Tang">David Tang</option>
                                        <option value="Daisy Zhu">Daisy Zhu</option>
                                        <option value="Kyle Bie">Kyle Bie</option>
                                        <option value="Cherry Wu">Cherry Wu</option>
                                        <option value="Alison Zhang">Alison Zhang</option>
                                    </select>
                                </div>
                            </div>
                            <!--<div class="col-md-6 margin-top-8">
        <div class="input-group">
            <span class="input-group-addon" id="">confirm person</span>
            <select class="selectpicker" name="vac_person2" id="vac_person2" data-style="btn-info">
                <option value="Mime Li">Mime Li</option>
                <option value="David Tang">David Tang</option>
                <option value="Daisy Zhu">Daisy Zhu</option>
                <option value="Kyle Bie">Kyle Bie</option>
                <option value="Cherry Wu">Cherry Wu</option>
                <option value="Alison Zhang">Alison Zhang</option>
            </select>
        </div>
    </div>-->

                            <div class="col-md-6 margin-top-8">
                                <div class="input-group">
                                    <span class="input-group-addon" id="">type</span>
                                    <select class="selectpicker" id="vac_type" name="vac_type" data-style="btn-info">
                                        <option value="年假">年假</option>
                                        <option value="调休假">调休假</option>
                                        <option value="补休假">补休假</option>
                                        <option value="事假">事假</option>
                                        <option value="婚假">婚假</option>
                                        <option value="丧假">丧假</option>
                                        <option value="产假">产假</option>
                                        <option value="陪产假">陪产假</option>
                                        <option value="病假">病假</option>
                                        <!--<option value="探亲假">探亲假</option>-->
                                        <option value="工伤假">工伤假</option>
                                        <option value="其他">其他</option>
                                    </select>
                                </div>
                            </div>

                        </div>
                        <div class="row">

                            <div class="col-md-6 margin-top-8">
                                <div class="input-group">
                                    <span class="input-group-addon" id="">days</span>
                                    <select class="selectpicker" id="vac_interval" name="vac_interval" data-style="btn-info">
                                        <option value="0.5">0.5</option>
                                        <option value="1" selected="selected">1</option>
                                        <option value="1.5">1.5</option>
                                        <option value="2">2</option>
                                        <option value="2.5">2.5</option>
                                        <option value="3">3</option>
                                        <option value="3.5">3.5</option>
                                        <option value="4">4</option>
                                        <option value="4.5">4.5</option>
                                        <option value="5">5</option>
                                        <option value="5.5">5.5</option>
                                        <option value="6">6</option>
                                        <option value="6.5">6.5</option>
                                        <option value="7">7</option>
                                        <option value="7.5">7.5</option>
                                        <option value="8">8</option>
                                        <option value="8.5">8.5</option>
                                        <option value="9">9</option>
                                        <option value="9.5">9.5</option>
                                        <option value="10">10</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6 margin-top-8">
                                <div class="input-group">
                                    <span class="input-group-addon" id="">begin date</span>
                                    <input type="text" id="vac_date" name="vac_date" class="form-control" placeholder="" aria-describedby="basic-addon1">
                                </div>
                            </div>

                        </div>

                        <div class="row">
                            <div class="col-md-6 margin-top-8">
                                <div class="input-group">
                                    <span class="input-group-addon" id="">end date</span>
                                    <input type="text" id="vac_enddate" class="form-control" name="vac_enddate" placeholder="" readonly="readonly" aria-describedby="basic-addon1">
                                </div>
                            </div>
                            <div class="col-md-6 margin-top-8">
                                <div class="input-group">
                                    <span class="input-group-addon" id="">office</span>
                                    <select class="selectpicker" name="vac_office" id="vac_office" data-style="btn-info">
                                        <option value="Xi'an">Xi'an</option>
                                        <option value="ShangHai">ShangHai</option>
                                        <option value="NanNing">NanNing</option>
                                        <option value="Belmont">Belmont</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!--<div class="row">
                           
                        </div>-->
                        <div class="row">
                            <div class="col-md-12 margin-top-8">
                                <div class="input-group">
                                    <span class="input-group-addon" id="">reason</span>
                                    <textarea class="form-control" style="resize:none;" name="vac_reason" id="vac_reason" placeholder="Please enter" aria-describedby="basic-addon1"></textarea>
                                </div>
                            </div>
                        </div>
                        <!--<div class="row" style="margin-top:10px;">
            <div class="col-md-2 col-md-offset-10 margin-top-8">
                <button class="btn btn-primary pull-right" id="submitbtn">Submit</button>
            </div>
        </div>-->
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="submitbtn">Submit</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


    <script src="{% static 'online/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'online/js/bootstrap-table.min.js' %}"></script>
    <script src="{% static 'online/js/bootstrap-table-locale-all.min.js' %}"></script>

    <!-- Bootstrap table extensions -->
    <!--
    <script src="js/bootstrap-table-export.js"></script>
    <script src="js/table-export/tableExport-bootstrap-table/tableExport.js"></script>
    <script src="js/common-script.js"></script>
    -->
    <!-- Business script -->
    <script src="{% static 'online/js/table.js' %}"></script>
    <script>
        Date.prototype.addDays = function (day, number) {
            var adjustDate = new Date(day + 24 * 60 * 60 * 1000 * 30 * number)
            //alert("Date" + adjustDate.getFullYear() + "-" + adjustDate.getMonth() + "-" + adjustDate.getDate());
            return adjustDate;
        }
        Date.prototype.Format = function (fmt) {
            var o = {
                "M+": this.getMonth() + 1,
                "d+": this.getDate(),
                "h+": this.getHours(),
                "m+": this.getMinutes(),
                "s+": this.getSeconds(),
                "q+": Math.floor((this.getMonth() + 3) / 3),
                "S": this.getMilliseconds() //??
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt))
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }

        Date.prototype.addDays2 = function (d) {
            this.setDate(this.getDate() + d);
            return this.Format('yyyy-MM-dd');
        };
        laydate.render({
            elem: '#vac_date',
            lang: 'en',
            done: function (value, date, endDate) {
                if (value && value.length > 0) {
                    $('#vac_date').attr('style', 'border:1px solid #ccc;');
                    var curDate = new Date(value);
                    $('#vac_enddate').val(curDate.addDays2(parseFloat($('#vac_interval').val())));
                } else {
                    $('#vac_enddate').val('');
                }
            }
        });
        function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie != '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) == (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
        $("#submitbtn").click(function () {
            //if ($('#vac_person').val().length < 1 || $('#vac_person').val() != $('#vac_person2').val()) {
            //    $('#vac_person2').attr('style', 'border:1px solid red;');
            //    return;
            //}
            var vac_dateobj = $('#vac_date');
            if (vac_dateobj && vac_dateobj.val().length > 0) {
                $.ajax({
                    url: '/online/savevacation/',
                    type: 'POST',
                    dataType: 'json',
                    headers: { "X-CSRFToken": getCookie('csrftoken') },
                    data: {
                        vac_date: $('#vac_date').val(),
                        vac_person: $('#vac_person').val(),
                        vac_interval: $('#vac_interval').val(),
                        vac_type: $('#vac_type').val(),
                        vac_reason: $('#vac_reason').val(),
                        vac_enddate: $('#vac_enddate').val(),
                        vac_office: $('#vac_office').val()
                    },
                    success: function (data) {
                        if (data && data.success == '1') {
                            
                            $('#myAlert').removeClass('hidden');
                            setTimeout(function () {
                                $('#myModal').modal('hide');    
                                $('#myAlert').addClass('hidden');
                                reloaddata();
                                sendmail();
                                //$('#table').bootstrapTable('refresh');
                                //loaddata();
                            }, 1000);
                            
                        } else {
                            $('#myAlerterror').removeClass('hidden');
                            setTimeout(function () {
                                $('#myAlerterror').addClass('hidden');
                            }, 1500);
                        }
                    }
                })

            } else {
                vac_dateobj.attr('style', 'border:1px solid red;');
            }
        })
        function sendmail() {
            var vac_date=$('#vac_date').val();
            var vac_person =$('#vac_person').val();
            var vac_interval = $('#vac_interval').val();
            var vac_type =$('#vac_type').val();
            var vac_reason =$('#vac_reason').val();
            var vac_enddate =$('#vac_enddate').val();
            var vac_office =$('#vac_office').val();
            var contents1 = vac_person + ' 请假 ' + vac_interval + " 天,开始时间 " + vac_date + "日 结束时间 " + vac_enddate + "日 ,请假类型 " + vac_type + " office " + vac_office + " 请假原因 " + vac_reason+"。";
            var contents = "<h3>" + vac_person+"请假信息如下：</h3><br/><table border='0' style=''><tr> <td> " + vac_person + " </td><td> 请假" + vac_interval + "天</td></tr><tr><td> 开始时间</td><td> " + vac_date + "日</td></tr><tr><td>结束时间</td><td> " + vac_enddate + "日</td></tr><tr><td>请假类型</td><td> " + vac_type + "</td></tr><tr><td>办公地址</td><td> " + vac_office + "</td></tr><tr><td>请假原因</td><td> " + vac_reason + "</td></tr></table>";
                    $.ajax({
                        url: '/online/sendmail/',
                        type: 'POST',
                        dataType: 'json',
                        headers: { "X-CSRFToken": getCookie('csrftoken') },
                        data: { contenttitle: contents1,content: contents},
                        success: function (data) {
                            if (data && data.success == '1') {
                                //send email success clear text
                                $('#vac_date').val('');
                                $('#vac_reason').val('');

                            } else {
                            }
                        }
                    })
        }
    </script>
</body>
</html>

